<style type="text/css">
    #gambar {
        border: 1px solid black;
        height: 600px;
        width: 600px;
        margin: 1em;
        display: inline-block;
        clear: both;
        background-position: center;
    }

    #gambar:hover {
        border-color: red;
        cursor: pointer;
    }

</style>
<div class="container">
    <h1 id="judul" class="title content-title" style="width: 650px;">
        {masukkan judul gambar}
    </h1>
</div>
<div style="display: inline-block;">
    <div id="gambar" class="img-uploader"></div>
    <form class="img-uploader" action="<?php echo site_url("service/imageupload/gal/true/200/100"); ?>" method="post" enctype="multipart/form-data"></form>
</div>
<div class="container" style="text-align: right; width: 600px; margin-left: 1em;">
    <button id="simpanbutton" onClick="javascript:saveForm();">Simpan</button>
</div>
<script type="text/javascript">
        var defJudul;
        jQuery(document).ready(function() {
            createTitleEditor("h1#judul", function() {
                defJudul = $("#judul").text();
            });
            $("h1#judul").focus(function() {
                if ($("h1#judul").text() === defJudul) {
                    $("h1#judul").text("");
                }
            });
            $("h1#judul").blur(function() {
                if ($("h1#judul").text() === "") {
                    $("h1#judul").text(defJudul);
                }
            });

        });
        function saveForm() {

            // inquiry    
            var data = {
                judul: $("#judul").text(),
                gambar: $("#gambar input[type='hidden']").val(),
            };

            // validation
            var messages = [];
            var validated = true;
            var goFocus = true;
            //..
            if (data.judul === defJudul) {
                messages.push("Isi Judul Gambar");
                validated = false;
                if (!goFocus) {
                    goFocus = "#judul";
                }
            }
            if (!data.gambar) {
                messages.push("Upload gambar");
                validated = false;
                if (!goFocus) {
                    goFocus = "#gambar";
                }
            }

            if (validated) {
                // send
                $.ajax({
                    type: "POST",
                    url: "<?php echo site_url("galeri/upload/img"); ?>",
                    data: data,
                    beforeSend: function(xhr) {
                        $("#simpanbutton").prop("disabled", true);
                    },
                    success: function(result, status, xhr) {
                        $("#simpanbutton").prop("disabled", false);
                        window.location = "<?php echo site_url("usercp/historygal"); ?>";
                    },
                    error: function(xhr, status, error) {
                        $("#simpanbutton").prop("disabled", false);
                    }
                });
            } else {
                var message = "Gagal menyimpan, silahkan : ";
                message += "<ul>";
                for (var i = 0; i < messages.length; i++) {
                    message += "<li>" + messages[i] + "</li>";
                }
                message += "</ul>";
                alert(message, "Perhatian");
                $(goFocus).focus();
                return false;
            }
        }

</script>